<template>
  <div class="designer-sidebar">
    <el-tabs class="sidebar-tabs" tab-position="left">
      <el-tab-pane>
        <template #label>
          <div class="tab-icon">
            <i class="el-icon-s-home"></i>
            <span>首页</span>
          </div>
        </template>
        <div class="tab-content">
          <basic-elements 
            @add-element="handleAddElement" 
            @toggle-grid="$emit('toggleGrid')"
            @toggle-ruler="$emit('toggleRuler')"
            @color-change="handleColorChange"
            @add-material="handleAddMaterial"
          />
        </div>
      </el-tab-pane>

      <el-tab-pane>
        <template #label>
          <div class="tab-icon">
            <i class="el-icon-news"></i>
            <span>内容模板</span>
          </div>
        </template>
        <div class="tab-content">
          <div class="content-templates-panel">
            <div class="panel-header">
              <h4>内容模板</h4>
              <el-input
                placeholder="搜索模板"
                prefix-icon="el-icon-search"
                v-model="contentTemplateSearch"
                size="small"
              />
            </div>
            
            <div class="panel-section">
              <h4>推荐模板</h4>
              <div class="template-grid">
                <div 
                  v-for="(template, index) in filteredContentTemplates" 
                  :key="index" 
                  class="template-item"
                  @click="$emit('applyContentTemplate', template)"
                >
                  <div class="template-thumbnail">
                    <img :src="template.thumbnail" :alt="template.name" />
                  </div>
                  <div class="template-name">{{ template.name }}</div>
                </div>
              </div>
            </div>
            
            <div class="panel-section">
              <h4>最近使用</h4>
              <div class="template-grid">
                <div 
                  v-for="(template, index) in recentContentTemplates" 
                  :key="index" 
                  class="template-item"
                  @click="$emit('applyContentTemplate', template)"
                >
                  <div class="template-thumbnail">
                    <img :src="template.thumbnail" :alt="template.name" />
                  </div>
                  <div class="template-name">{{ template.name }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      
      <el-tab-pane>
        <template #label>
          <div class="tab-icon">
            <i class="el-icon-edit"></i>
            <span>文字</span>
          </div>
        </template>
        <div class="tab-content">
          <div class="text-styles-panel">
            <div class="panel-header">
              <h4>添加文字</h4>
              <el-button type="primary" icon="el-icon-plus" @click="$emit('addText')">添加文字</el-button>
            </div>
            
            <div class="panel-section">
              <h4>常用文字样式</h4>
              <div class="text-styles-list">
                <div 
                  v-for="(style, index) in textStyles" 
                  :key="index" 
                  class="text-style-item"
                  @click="$emit('applyTextStyle', style)"
                >
                  <div 
                    class="text-style-preview" 
                    :style="{
                      fontFamily: style.fontFamily,
                      fontSize: style.fontSize + 'px',
                      fontWeight: style.fontWeight,
                      fontStyle: style.fontStyle,
                      color: style.color
                    }"
                  >
                    {{ style.name }}
                  </div>
                </div>
              </div>
            </div>
            
            <div class="panel-section">
              <h4>标题组合</h4>
              <div class="text-combo-list">
                <div 
                  v-for="(combo, index) in textCombos" 
                  :key="index" 
                  class="text-combo-item"
                  @click="$emit('applyTextCombo', combo)"
                >
                  <div class="combo-preview">
                    <div class="combo-title" :style="combo.title.style">{{ combo.title.text }}</div>
                    <div class="combo-subtitle" :style="combo.subtitle.style">{{ combo.subtitle.text }}</div>
                  </div>
                  <div class="combo-name">{{ combo.name }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      
      <el-tab-pane>
        <template #label>
          <div class="tab-icon">
            <i class="el-icon-picture-outline"></i>
            <span>素材</span>
          </div>
        </template>
        <div class="tab-content">
          <div class="materials-panel">
            <div class="panel-header">
              <h4>素材库</h4>
              <el-input
                placeholder="搜索素材"
                prefix-icon="el-icon-search"
                v-model="materialSearch"
                size="small"
              />
            </div>
            
            <div class="materials-categories">
              <el-radio-group v-model="materialCategory" size="small">
                <el-radio-button label="all">全部</el-radio-button>
                <el-radio-button label="image">图片</el-radio-button>
                <el-radio-button label="shape">形状</el-radio-button>
                <el-radio-button label="icon">图标</el-radio-button>
                <el-radio-button label="bg">背景</el-radio-button>
              </el-radio-group>
            </div>
            
            <div class="panel-section">
              <h4>推荐素材</h4>
              <div class="materials-grid">
                <div 
                  v-for="(material, index) in filteredMaterials" 
                  :key="index" 
                  class="material-item"
                  @click="handleAddMaterial(material)"
                >
                  <div class="material-thumbnail">
                    <img :src="material.thumbnail" :alt="material.name" />
                  </div>
                  <div class="material-name">{{ material.name }}</div>
                </div>
              </div>
            </div>
            
            <div class="panel-section">
              <h4>我的上传</h4>
              <div class="my-uploads">
                <el-button size="small" @click="openUploadDialog">
                  <i class="el-icon-upload"></i> 上传素材
                </el-button>
                <div v-if="userMaterials.length > 0" class="materials-grid">
                  <div 
                    v-for="(material, index) in userMaterials" 
                    :key="index" 
                    class="material-item"
                    @click="handleAddMaterial(material)"
                  >
                    <div class="material-thumbnail">
                      <img :src="material.url" :alt="material.name" />
                    </div>
                    <div class="material-name">{{ material.name }}</div>
                  </div>
                </div>
                <div v-else class="no-materials">
                  <p>您还没有上传任何素材</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      
      <el-tab-pane>
        <template #label>
          <div class="tab-icon">
            <i class="el-icon-shopping-cart-2"></i>
            <span>电商</span>
          </div>
        </template>
        <div class="tab-content">
          <commerce-panel 
            @apply-template="handleApplyTemplate"
            @add-element="handleAddCommerce"
          />
        </div>
      </el-tab-pane>
      
      <el-tab-pane>
        <template #label>
          <div class="tab-icon">
            <i class="el-icon-menu"></i>
            <span>图层</span>
          </div>
        </template>
        <div class="tab-content">
          <layer-panel 
            :layers="layers"
            @layer-updated="$emit('layerUpdated', $event)"
            @layer-visibility="$emit('layerVisibility', $event)"
            @layer-lock="$emit('layerLock', $event)"
            @layer-selected="$emit('layerSelected', $event)"
            @layer-deleted="$emit('layerDeleted', $event)"
            @reorder-layers="$emit('reorderLayers', $event)"
          />
        </div>
      </el-tab-pane>
      
      <el-tab-pane>
        <template #label>
          <div class="tab-icon">
            <i class="el-icon-picture"></i>
            <span>模板</span>
          </div>
        </template>
        <div class="tab-content">
          <div class="templates-panel">
            <div class="panel-header">
              <h4>设计模板</h4>
              <el-input
                placeholder="搜索模板"
                prefix-icon="el-icon-search"
                v-model="templateSearch"
                size="small"
              />
            </div>
            
            <div class="panel-section">
              <h4>热门模板</h4>
              <div class="template-grid">
                <div 
                  v-for="(template, index) in filteredTemplates" 
                  :key="index" 
                  class="template-item"
                  @click="$emit('applyTemplate', template)"
                >
                  <div class="template-thumbnail">
                    <img :src="template.thumbnail" :alt="template.name" />
                  </div>
                  <div class="template-name">{{ template.name }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import BasicElements from './BasicElements.vue';
import LayerPanel from '../layers/LayerPanel.vue';
import CommercePanel from '../commerce/CommercePanel.vue';

const emit = defineEmits([
  'addShape', 
  'addElement',
  'activateTool', 
  'toggleGrid', 
  'toggleRuler',
  'colorChange',
  'addMaterial',
  'addText',
  'applyTemplate',
  'applyTextStyle',
  'applyTextCombo',
  'applyContentTemplate',
  'layerUpdated',
  'layerVisibility',
  'layerLock',
  'layerSelected',
  'layerDeleted',
  'reorderLayers',
  'addCommerce'
]);

const props = defineProps({
  layers: {
    type: Array,
    default: () => []
  }
});

// 处理基础元素添加
function handleAddElement(type) {
  if (type === 'text') {
    emit('addText');
  } else if (type === 'brush') {
    emit('activateTool', 'brush');
  } else {
    emit('addShape', type);
  }
}

// 处理颜色变更
function handleColorChange(color) {
  emit('colorChange', color);
}

// 处理素材添加
function handleAddMaterial(material) {
  emit('addMaterial', material);
}

// 处理电商元素添加
function handleAddCommerce(element) {
  emit('addCommerce', element);
}

// 处理模板应用
function handleApplyTemplate(template) {
  emit('applyTemplate', template);
}

// 打开上传对话框
function openUploadDialog() {
  // 此处应该调用上传对话框
  console.log('打开上传对话框');
}

// 模板搜索
const templateSearch = ref('');
const templates = [
  { id: 1, name: '简约黑白海报', thumbnail: '/images/templates/template1.jpg' },
  { id: 2, name: '商务宣传海报', thumbnail: '/images/templates/template2.jpg' },
  { id: 3, name: '创意艺术海报', thumbnail: '/images/templates/template3.jpg' },
  { id: 4, name: '节日庆典海报', thumbnail: '/images/templates/template4.jpg' },
  { id: 5, name: '时尚产品展示', thumbnail: '/images/templates/template5.jpg' },
  { id: 6, name: '教育培训海报', thumbnail: '/images/templates/template6.jpg' },
];

const filteredTemplates = computed(() => {
  if (!templateSearch.value) return templates;
  return templates.filter(template => 
    template.name.toLowerCase().includes(templateSearch.value.toLowerCase())
  );
});

// 内容模板搜索
const contentTemplateSearch = ref('');
const contentTemplates = [
  { id: 1, name: '简约文章', thumbnail: '/images/content/content1.jpg' },
  { id: 2, name: '产品介绍', thumbnail: '/images/content/content2.jpg' },
  { id: 3, name: '个人简历', thumbnail: '/images/content/content3.jpg' },
  { id: 4, name: '公司介绍', thumbnail: '/images/content/content4.jpg' },
  { id: 5, name: '菜单', thumbnail: '/images/content/content5.jpg' },
  { id: 6, name: '广告文案', thumbnail: '/images/content/content6.jpg' },
];

const filteredContentTemplates = computed(() => {
  if (!contentTemplateSearch.value) return contentTemplates;
  return contentTemplates.filter(template => 
    template.name.toLowerCase().includes(contentTemplateSearch.value.toLowerCase())
  );
});

const recentContentTemplates = [
  { id: 7, name: '最近使用1', thumbnail: '/images/content/recent1.jpg' },
  { id: 8, name: '最近使用2', thumbnail: '/images/content/recent2.jpg' },
];

// 文字样式
const textStyles = [
  { 
    name: '标题', 
    fontFamily: 'Microsoft YaHei', 
    fontSize: 32, 
    fontWeight: 'bold', 
    fontStyle: 'normal', 
    color: '#333333' 
  },
  { 
    name: '副标题', 
    fontFamily: 'Microsoft YaHei', 
    fontSize: 24, 
    fontWeight: 'normal', 
    fontStyle: 'normal', 
    color: '#666666' 
  },
  { 
    name: '正文', 
    fontFamily: 'SimSun', 
    fontSize: 16, 
    fontWeight: 'normal', 
    fontStyle: 'normal', 
    color: '#333333' 
  },
  { 
    name: '强调文本', 
    fontFamily: 'Microsoft YaHei', 
    fontSize: 18, 
    fontWeight: 'bold', 
    fontStyle: 'normal', 
    color: '#FF5722' 
  },
  { 
    name: '引用', 
    fontFamily: 'KaiTi', 
    fontSize: 18, 
    fontWeight: 'normal', 
    fontStyle: 'italic', 
    color: '#999999' 
  },
];

// 文字组合
const textCombos = [
  {
    name: '大标题组合',
    title: {
      text: '主标题',
      style: {
        fontFamily: 'Microsoft YaHei',
        fontSize: '32px',
        fontWeight: 'bold',
        color: '#333333'
      }
    },
    subtitle: {
      text: '副标题文本',
      style: {
        fontFamily: 'Microsoft YaHei',
        fontSize: '18px',
        fontWeight: 'normal',
        color: '#666666'
      }
    }
  },
  {
    name: '产品标题',
    title: {
      text: '产品名称',
      style: {
        fontFamily: 'Microsoft YaHei',
        fontSize: '28px',
        fontWeight: 'bold',
        color: '#FF5722'
      }
    },
    subtitle: {
      text: '产品描述文字',
      style: {
        fontFamily: 'Microsoft YaHei',
        fontSize: '16px',
        fontWeight: 'normal',
        color: '#999999'
      }
    }
  },
  {
    name: '活动标题',
    title: {
      text: '活动主题',
      style: {
        fontFamily: 'Microsoft YaHei',
        fontSize: '30px',
        fontWeight: 'bold',
        color: '#2196F3'
      }
    },
    subtitle: {
      text: '活动时间和地点',
      style: {
        fontFamily: 'Microsoft YaHei',
        fontSize: '16px',
        fontWeight: 'normal',
        color: '#666666'
      }
    }
  }
];

// 素材库
const materialSearch = ref('');
const materialCategory = ref('all');
const materials = [
  { id: 1, name: '商务图片1', thumbnail: '/images/materials/material1.jpg', type: 'image' },
  { id: 2, name: '抽象形状1', thumbnail: '/images/materials/material2.jpg', type: 'shape' },
  { id: 3, name: '购物图标', thumbnail: '/images/materials/material3.jpg', type: 'icon' },
  { id: 4, name: '渐变背景', thumbnail: '/images/materials/material4.jpg', type: 'bg' },
  { id: 5, name: '风景图片', thumbnail: '/images/materials/material5.jpg', type: 'image' },
  { id: 6, name: '装饰元素', thumbnail: '/images/materials/material6.jpg', type: 'shape' },
];

const filteredMaterials = computed(() => {
  let result = materials;
  
  // 按类别筛选
  if (materialCategory.value !== 'all') {
    result = result.filter(material => material.type === materialCategory.value);
  }
  
  // 按搜索筛选
  if (materialSearch.value) {
    result = result.filter(material => 
      material.name.toLowerCase().includes(materialSearch.value.toLowerCase())
    );
  }
  
  return result;
});

// 用户上传素材
const userMaterials = [
  { id: 'u1', name: '我的素材1', url: '/images/materials/user1.jpg' },
  { id: 'u2', name: '我的素材2', url: '/images/materials/user2.jpg' }
];
</script>

<style scoped>
.designer-sidebar {
  height: 100%;
  display: flex;
  background-color: #f5f7fa;
}

.sidebar-tabs {
  height: 100%;
  width: 100%;
}

:deep(.el-tabs__nav-wrap) {
  padding: 0;
}

:deep(.el-tabs__nav) {
  width: 60px;
}

:deep(.el-tabs__item) {
  height: auto;
  padding: 10px 0;
}

:deep(.el-tabs__content) {
  flex: 1;
  height: 100%;
  overflow-y: auto;
}

.tab-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 0;
}

.tab-icon i {
  font-size: 18px;
  margin-bottom: 4px;
}

.tab-icon span {
  font-size: 12px;
}

.tab-content {
  height: 100%;
  overflow-y: auto;
}

/* 面板通用样式 */
.content-templates-panel,
.text-styles-panel,
.materials-panel,
.templates-panel {
  padding: 15px;
}

.panel-header {
  margin-bottom: 15px;
}

.panel-header h4 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 14px;
  color: #333;
}

.panel-section {
  margin-bottom: 20px;
}

.panel-section h4 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}

/* 网格布局 */
.template-grid,
.materials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 10px;
}

/* 模板项 */
.template-item,
.material-item {
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s;
  border: 1px solid #e0e0e0;
  background-color: #fff;
}

.template-item:hover,
.material-item:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-color: #a0cfff;
}

.template-thumbnail,
.material-thumbnail {
  width: 100%;
  height: 120px;
  overflow: hidden;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.template-thumbnail img,
.material-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.template-name,
.material-name {
  padding: 8px;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #606266;
}

/* 文字样式部分 */
.text-styles-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.text-style-item {
  padding: 10px;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  transition: all 0.3s;
}

.text-style-item:hover {
  background-color: #f0f7ff;
  border-color: #a0cfff;
}

.text-style-preview {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 文字组合部分 */
.text-combo-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.text-combo-item {
  padding: 12px;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  transition: all 0.3s;
}

.text-combo-item:hover {
  background-color: #f0f7ff;
  border-color: #a0cfff;
}

.combo-preview {
  margin-bottom: 8px;
}

.combo-title {
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.combo-subtitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.combo-name {
  font-size: 12px;
  color: #909399;
}

/* 素材部分 */
.materials-categories {
  margin-bottom: 15px;
  overflow-x: auto;
  white-space: nowrap;
}

.my-uploads {
  margin-top: 10px;
}

.no-materials {
  margin-top: 20px;
  text-align: center;
  color: #909399;
  font-size: 13px;
}
</style>